<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>html table+css graph|chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
    <style type="text/css">

      table.chart {
        border:0;
      }

      table tbody td {
        font-size:80%;
        border: 0;
      }

      table tbody td, table tbody th{
        padding:2px; 
      }
      table.chart thead,
      table.chart tbody th {
        background-color:#afa
      }

      table.chart tbody tr {
        background-color: #dfd;
      }

      table.chart tbody tr.odd {
        background-color: #efe;
      }

      table td .male {
        background:#faa;
      }

      table td .female {
        background:#aaf
      }

      table td span.bar {
         display:block;
      }

    </style>
  </head>
  <body>
 
    <table class="chart vertical" width="300" rules="none">
      <caption> Вертикальная Гистограмма </caption>
     <tbody>
        <tr>
          <th rowspan="2">1</th>
          <td title="63" ><span class="bar male" style="width:63%">63</span></td>
        </tr>
        <tr>
          <td title="49" ><span class="bar female" style="width:49%;">49</span></td>
        </tr>

        <tr class="odd">
          <th rowspan="2">2</th>
          <td title="33"><span class="bar male" style="width:33%">33</span></td>
         </tr>
        <tr class="odd">
          <td title="3"><span class="bar female" style="width:3%;">3</span></td>
         </tr>

         <tr>
          <th rowspan="2">3</th>
          <td title="11"><span class="bar male" style="width:11%">11</span></td>
        </tr>
        <tr>
          <td title="72"><span class="bar female" style="width:72%;">72</span></td>
        </tr>

        <tr class="odd">
          <th rowspan="2">4</th>
          <td title="8"><span class="bar male" style="width:8%">8</span></td>
        </tr>
        <tr class="odd">
          <td title="14"><span class="bar female" style="width:14%;">14</span></td>
        </tr>
      </tbody>
      </table> 
   
    <table class="chart vertical" width="300" rules="none">
      <caption> Вертикальная Гистограмма </caption>
      <col />
      <col width="*"/>
      <col />
      <thead>
        <tr>
          <th>m (%)
          </th>
          <th >
          </th>
          <th>f (%)
          </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td title="63" align="right"><span class="bar male" style="width:63%">63</span></td>
          <th>1</th>
          <td title="49"><span class="bar female" style="width:49%;">49</span></td>
        </tr>

        <tr class="odd">
          <td title="33" align="right"><span class="bar male" style="width:33%">33</span></td>
          <th>2</th>
          <td title="3"><span class="bar female" style="width:3%;">3</span></td>
         </tr>

         <tr >
          <td title="11" align="right"><span class="bar male" style="width:11%">11</span></td>
          <th>3</th>
          <td title="72"><span class="bar female" style="width:72%;">72</span></td>
        </tr>

        <tr class="odd">
          <td title="8" align="right"><span class="bar male" style="width:8%">8</span></td>
          <th>4</th>
          <td title="14"><span class="bar female" style="width:14%;">14</span></td>
        </tr>
      </tbody>
    </table>

    <table class="chart horizontal" width="300" rules="none">
      <caption> Горизонтальная Гистограма
      (doesn't work yet) </caption>

        <tr valign="bottom" align="center">
          <th>m</th>
          <td title="63"><span class="bar male" style="height:63%">63</span></td>
          <td title="33"><span class="bar male" style="height:33%">33</span></td>
          <td title="11"><span class="bar male" style="height:11%">11</span></td>
          <td title="8"><span class="bar male" style="height:8%">8</span></td>
        </tr>

         <tr>
          <th>/</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>

        <tr valign="top" align="center">
          <th>f</th>
          <td title="49"><span class="bar female" style="height:49%;">49</span></td>
          <td title="3"><span class="bar female" style="height:3%;">3</span></td>
          <td title="72"><span class="bar female" style="height:72%;">72</span></td>
          <td title="14"><span class="bar female" style="height:14%;">14</span></td>
         </tr>
    </table>
  </body>
</html>
